<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">
    <link rel="stylesheet" href="demo.css">

    <title>淘宝网-淘！我喜欢</title>

    <style type="text/css">
        /* 首页背景贴图 */
        html {
            height: 100%;
            /* 高度填充整个窗口 */
        }

        body {
            /* height: 100%; */
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            background-color: #F5F5F5;
            /* 整个页面背景为淡灰色 */

            background-size: 100% 100%;
        }

        .my-container {
            position: fixed;
            /*固定定位*/
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;

            display: flex;
            flex-direction: column;
            align-items: center;


            /*background-color: red;*/
        }

        /* 头导航栏 */
        .my-header {

            /*绝对定位，即相对于父元素的定位*/

            width: 100%;
            height: 40px;
            margin-top: 10px;

            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/

            /* background-color:#ff3050; */

        }


        .type{
            margin-top: 5px;
            margin-right: 140px;
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            /* line-height: 14px; */
            color: #fff;
            border: none;
            font-weight: bold;
            /* 加粗 */
            /* background-color: whitesmoke; */
        }


        .my-main {
            /* position: absolute; */
            margin-left: 0px;
            /* top: 40px; */
            margin-right: 0px;
            bottom: 40px;
            /* 实现滑动 */
            overflow: auto;
        }

        .my-footer {

            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;

            display: flex;
            flex-direction: row;

            border-top: 0.2px solid white;
            /*边框 粗细、线型、颜色 */

            /* background-color: #FFFFFF; */
            /* background: pink; */
            /* color: #fff; */
            /* 加粗 */
            font-weight: bold;
            /*线性渐变*/
            /* background-image: linear-gradient(to right,#ff5000 0,#ff0000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            /* border-radius: 6px 6px 0 0; */

        }

        .my-header-item {
            /* color: black; */
            /*文字颜色*/
            margin: 0 5px 0 0;
            /* 上右下左四个外边距 */
            width: 45px;
            text-align: center;
            /*内部文本水平居中*/
            /* border-radius: 10px; */
            /*设置边框圆角半径*/

        }

        /* .my-header-item:active { */
        /*点击时的样式*/
        /* background-color: red;
            color: yellow; */
        /* background-image: linear-gradient(to right, #ff7f44 0, #ff6262 100%); */
        /*滤镜*/
        /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */

        /* } */

        .my-footer-item {
            border-right: 1px solid #EEEEEE;
            height: 100%;
            color: black;
            /*font-size:20px;*/

            flex: 1 1 auto;
            /*设置在flex容器的元素上，用于设置自适应缩放*/

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            padding-top: 3px;
            border-radius: 50px 50px 50px 50px;

        }

        .my-home {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .my-card {

            width: 96%;
            height: 180px;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            box-shadow: 0 0 5px 1px #CCCCCC;

            background-color: white;
            /*
                opacity: 0.3;
            */
            /*background: transparent;*/
            /*传递父元素的背景，即背景透明*/
            margin: 5px 0 5px 0;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;





        }

        .my-goods-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .my-goods-info>div {
            margin-bottom: 5px;
        }



        .searchContent {
            height: 40px;
        }

        .my-btn-search {
            position: absolute;
            top: 1px;
            right: 2px;
            width: 50px;
            height: 30px;
            text-align: center;
            font-size: 15px;
            line-height: 14px;
            color: #fff;
            border: none;
            background-image: linear-gradient(to right, #ff6000 0, #ff2000 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff6000', endColorstr='#ffff2000', GradientType=1);
            border-radius: 20px 20px 20px 20px;
        }

        .searchBox {
            margin-left: 10px;
            margin-top: 2px;
            width: 290px;
            height: 35px;
            background-color: white;
            box-sizing: border-box;
            border: 2px solid white;
            border-right: none;
            border-radius: 20px 20px 20px 20px;
            /* overflow: hidden; */
            position: relative;
        }

        .searchBox input {
            position: absolute;
            margin-top: 2px;
            width: 284px;
            height: 30px;
            line-height: 36px;
            padding-right: 90px;
            padding-left: 8px;
            outline: none;
            /* 去掉文本框的外轮廓 */
            border: none;
            /* 去掉边框 */
            text-indent: 10px;
            /*透明 将input和placeholder透在同一层 为了能够看到后面的文字*/
            z-index: 2;
            background-color: transparent;
        }

        .searchBox .placeholder {
            position: absolute;
            top: 2px;
            left: 14px;
            color: #9c9c9c;
        }

        /* .searchBox>.placeholder { */


        /* vertical-align: 2px; */
        /* } */

        .searchBox>.imgSearch {
            position: absolute;
            /* font-size: 18px; */
            /* color: #9c9c9c; */
            right: 60px;
            top: 2px;
            cursor: pointer;
        }

        .my-header>span.scancode {
            /* position: absolute; */
            margin-top: 5px;
            margin-left: 10px;
            color: white;
            /* vertical-align: 30px; */

        }

        .my-header>span.qrcode {
            position: absolute;
            top: 15px;
            right: 8px;
            color: white;
            /* vertical-align: 30px; */

        }

        /* 导航栏 */
        .hotKey {
            width: 98%;
            height: 25px;
            margin-left: 4px;
            line-height: 25px;
            /* height: 40px; */
            /* background: pink; */
            /* color: white; */
            /* font-weight: bold; */

            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/

            /*线性渐变*/
            /* background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); */
            /* border-radius: 6px 6px 0 0; */
        }

        .hotKey>li {
            /* position: relative; */
            margin-left: 6px;
            color: #e7e6e6;
            /* margin-right: 8px; */
            padding-right: 20px;
            /* padding-left: 10px; */
            /* cursor: pointer; */
        }

        .hotKey>li.active {
            /* position: absolute; */
            font-size: 18px;
            margin-left: 12px;
            color: white;
            font-weight: bold;
        }

        .hotKey>i {
            position: absolute;
            right: 10px;
            background-image: url(resources/images/fbackground.png);
        }

        /* 图片1容器 */
        .img1Box {

            /* overflow: hidden; */
            width: 97%;
            height: 120px;
            margin-left: 5px;
            /* background: #eee; */
            border-radius: 10px 10px 10px 10px;


        }

        .img2Box {
            /* overflow: hidden; */
            width: 97%;
            height: 130px;
            margin-left: 6px;
            margin-top: 14PX;
            /* align-items: center; */
            /* text-align: center; */
            /* background: #d5d5d5; */
            border-radius: 10px 10px 10px 10px;
        }

        .img2Box>.type {
            /* position: absolute; */
            font-size: 23px;
            color: white;
            margin-top: 0px;
            /* 加粗 */
            font-weight: bold;
            text-align: center;
            /* align-items: center; */
            /* background-size: 100% 100%; */
        }

        .img2Box>.i1 {
            /* margin-right: 2px; */
            border-radius: 10px 10px 10px 10px;
        }

        .img3Box {
            /* overflow: hidden; */
            width: 99%;
            margin-left: 2px;

            /* background-color: white; */

            /* text-align: center; */
            /* background: #d5d5d5; */
            border-radius: 5px 5px 5px 5px;

            display: flex;
            flex-direction: column;
            align-items: center;

            position: absolute;
            top: 340px;
            bottom: 0px;
            left: 0;
            right: 0;

        }

        .img3Box>.h>.tb {
            /* position: absolute; */
            font-size: 23px;
            color: #ff3050;
            /* 加粗 */
            font-weight: bold;
            text-align: center;
            /* align-items: center; */
            /* background-size: 100% 100%; */
            /* font-style: linear-gradient(to right, #ff6000 0, #ff2000 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff6000', endColorstr='#ffff2000', GradientType=1); */
        }

        .img3Box>.h>.ts {
            width: 110px;
            height: 23px;
            font-size: 15px;
            color: white;
            background-color: #ff3030;
            margin-left: 126px;
            text-align: center;
            border-radius: 20px 20px 20px 20px;
            /* 加粗 */
            font-weight: bold;
            /* align-items: center; */

        }

        .img3Box>.img3 {
            /* margin-right: 2px; */
            width: 99%;

            /* background-color: white; */
            border-radius: 10px 10px 10px 10px;

            position: absolute;
            top: 60px;
            bottom: 0;
            /* 实现页面滑动 */
            overflow: auto;
        }

        .my-mine {
            position: absolute;
            width: 364px;
            height: 740px;
            display: flex;
            /*定义本元素为flex容器*/
            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            flex-direction: row;
            justify-content: flex-start;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
        }

        .im {
            position: absolute;
            width: 120px;
            height: 120px;
            /* background-color: #cccccc; */
            left: 122px;
            /* align-content: center; */
            top: 100PX;
            border-radius: 58px 58px 58px 58px;
        }

        .it1 {
            width: 150px;
            height: 53px;
            margin-top: 300px;
            margin-left: 16px;
            margin-right: 16px;
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            /* background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            border-radius: 25px 25px 25px 25px;
        }

        .it1:active {
            background-image: linear-gradient(to right, #ff7f44 0, #ff6262 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }

        .it2 {
            position: absolute;
            width: 150px;
            height: 53px;
            bottom: 20px;
            /* margin-top: 300px; */
            left: 106px;
            /* right: 160px; */
            /* background-color: #cccccc; */
            /* margin-left: 50px; */
            background-image: linear-gradient(to right, #12B7F5, #9e0cf3 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
            /* background-image: linear-gradient(to right, #ff5000 0, #ff0000 100%); */
            /*滤镜*/
            /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1); */
            border-radius: 25px 25px 25px 25px;
        }

        .it2:active {
            background-image: linear-gradient(to right, rgb(112, 217, 255), #be4eff 100%);
            /*滤镜*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff0000', GradientType=1);
        }

        .my-header-item {
            /* position: absolute; */
            color: white;
            font-weight: bold;
            margin-left: 52px;
            font-size: 22px;
            margin-top: 10px;
            /* text-align: center; */
            /* align-content: center; */
        }
    </style>

</head>

<body>

    <div id="app" class="my-container">


        <div class="my-mine" >
            <div class="im">
                <img src="resources/images/pic_07.jpg"
                    style="width:100%;height:100%;border-radius: 58px 58px 58px 58px;">
            </div>
            <!-- 获取用户名 -->
            <div  class="my-name" style="width: 100%;height: 100%;">
                    <!-- <img :src="$server.baseURL() + goods.picure" style="height:160px;"> -->
                    <div class="my-goods-info" style="margin-left:120px;margin-top: 300px;">
                        <div style="font-size: 26px;font-weight: bold;color: #ff3030;">用户：{{person.u_name}}
                        </div>
                        <div style="margin-left: 0px;font-size: 26px;font-weight: bold;color: #ff3030;">性别：{{person.u_sex}}</div>
                        <!-- <div>
                            <button type="button" class="btn btn-danger btn-sm"><i
                                    class="fa fa-shopping-cart"></i>
                                加入购物车</button>
                        </div> -->
                    </div>
                </div>
            <div @click="execLogout" class="it2">
                <!-- <div class="type"> -->
                <div class="my-header-item" type="weigth=100%;height=100%">退出</div>
                <!-- </div> -->
            </div>
        </div>

        <div class="type"></div>
        <i onclick="jump1()" style="position:absolute;left:10px;top:5px;" class="fa fa-angle-left fa-2x"></i>


    </div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变；需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el: '#app',//指定渲染的元素
        data: {//定义数据
            list: [],
            currVisible: 'home',

            //当前登录账号
            loginUserID: null,
            person:{},


        },
        methods: {//定义方法
            //调转到注册页
            toRegister() {
                location.href = 'register.html';
            },
            toLogin() {
                location.href = 'login.html';
            },
            toSearch() {
                location.href = 'search.html';
            },
            toThings() {
                location.href = 'things.html';
            },
            execLogout() {
                this.$post('/execLogout.jsp')
                    .then(() => {
                        this.loginUserID = null;
                    });
                    location.href = 'home.html';
            }
        },
        mounted() {//定义界面渲染完成后需要执行的代码
            //document.querySelector('#home').style.backgroundColor='#EEEEEE';
            this.currVisible = 'home';

            this.$setServerConfig({
                ip: 'localhost',
                port: 8080,
                app: 'xxx'
            });
            this.$get('http://localhost:8080/xxx/1.jsp')
                .then((data) => {
                    this.list = data;
                    console.log(this.list);
                });
            this.$get('http://localhost:8080/xxx/2.jsp')
                .then((data) => {
                    this.person = data;
                    console.log(this.person);
                });

            //获取登录用户
            this.$get('/currUserID.jsp')
                .then((result) => {
                    this.loginUserID = result.data;
                })

        }
    });


    function jump(){

            setTimeout("window.location.href='minelg_mine.html'",2);

}  

function jump1(){

setTimeout("window.location.href='minelg.html'",2);

}  





</script>


</html>